<template>
    <el-dialog
        v-model="modelValue"
        title="上刊数据回传"
        width="480px"
        custom-class="upload-data-dialog"
        :close-on-click-modal="false"
    >
        <div class="tips-box">
            <img class="tips-icon" src="@/assets/jingshi.png" />
            <span class="tips-info">数据上传后无法修改，无法重复上传，请谨慎操作</span>
        </div>
        <el-form class="mt-20" :model="uploadDataForm" label-position="top">
            <el-form-item label="上刊日期">
                <el-input v-model="uploadDataForm.skDate" class="dialog-form-input" disabled></el-input>
            </el-form-item>
            <el-form-item label="推送ID">
                <el-input v-model="uploadDataForm.batchId" class="dialog-form-input" disabled></el-input>
            </el-form-item>
            <div>
                <div>
                    <span class="display-block">1.下载基础数据</span>
                    <el-button class="mt-12" :loading="downloadLoading" @click="downloadTemplate">
下载模板
</el-button>
                </div>
                <div class="mt-20">
                    <span>2.上传上刊数据</span>
                    <el-upload
                        ref="upload"
                        v-model:file-list="uploadDataForm.fileList"
                        accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel,text/csv"
                        action=""
                        :before-upload="beforeUpload"
                        :http-request="httpRequest"
                        :on-remove="onRemove"
                        drag
                    >
                        <i class="el-icon-upload"></i>
                        <div class="upload-text">
                            <div>
                                <span>把文件拖拽至此，或</span>
                                <span class="highlight-text">点击上传</span>
                            </div>
                            <span class="mt-8">仅可上传1个文件，支持csv、xls等excel文件</span>
                        </div>
                    </el-upload>
                </div>
            </div>
        </el-form>
        <template #footer>
            <el-button @click="switchUploadDataDialog">
取消
</el-button>
            <el-button
                type="primary"
                :loading="submitLoading"
                :disabled="!!!uploadDataForm.fileList.length"
                @click="submitPublishData"
            >
                提交
            </el-button>
        </template>
    </el-dialog>
    <el-dialog v-model="errorMsgDialogShow" title="提示信息" width="400px" :close-on-click-modal="false">
        <el-tooltip v-if="submitErrorMsg.length > 50" :content="submitErrorMsg" effect="dark" placement="top">
            <span>{{ submitErrorMsg.substring(0, 50) + '...' }}</span>
        </el-tooltip>
        <span v-else>{{ submitErrorMsg }}</span>
        <template #footer>
            <el-button type="primary" @click="errorMsgDialogShow = false">
确定
</el-button>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits, watch, reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { downloadPublishDataTemplate, uploadPublishData } from '@/api/advertisingPush';

interface UploadDataForm {
    skDate: string;
    batchId: string;
    fileList: Array<any>;
}

const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false,
    },
    detail: {
        type: Object,
        default: () => {
            return {};
        },
    },
});
const emits = defineEmits(['update:modelValue', 'success']);
watch(
    () => props.modelValue,
    () => {
        if (props.modelValue) {
            uploadDataForm.skDate = props.detail.skDate;
            uploadDataForm.batchId = props.detail.batchId;
            uploadDataForm.fileList = [];
        }
    }
);

const downloadLoading = ref(false);
const submitLoading = ref(false);
const errorMsgDialogShow = ref(false);
const submitErrorMsg = ref('');
const uploadDataForm = reactive<UploadDataForm>({
    skDate: '',
    batchId: '',
    fileList: [],
});

const switchUploadDataDialog = () => {
    emits('update:modelValue', !props.modelValue);
};
// 下载上刊数据模板
const downloadTemplate = async () => {
    downloadLoading.value = true;
    try {
        const params = {
            batchId: props.detail.batchId,
        };
        const templateUrl = await downloadPublishDataTemplate(params);
        window.open(templateUrl, '_self');
    } finally {
        downloadLoading.value = false;
    }
};
const beforeUpload = (file: any) => {
    const fileSuffix = file.name.substring(file.name.lastIndexOf('.') + 1);
    if (!['xlsx', 'xls', 'csv'].includes(fileSuffix)) {
        ElMessage.error('请上传Excel文件');
        return false;
    }
    return true;
};
const httpRequest = (res: any) => {
    uploadDataForm.fileList = [
        {
            file: res.file,
            name: res.file.name,
            size: res.file.size,
        },
    ];
};
const onRemove = () => {
    uploadDataForm.fileList = [];
};
// 提交上刊数据
const submitPublishData = async () => {
    if (!uploadDataForm.fileList.length) {
        ElMessage.error('请先上传上刊数据');
        return;
    }
    submitLoading.value = true;
    try {
        const formData = new FormData();
        formData.append('batchId', uploadDataForm.batchId);
        formData.append('file', uploadDataForm.fileList[0].file);
        const errorMsg = await uploadPublishData(formData);
        if (errorMsg) {
            submitErrorMsg.value = errorMsg;
            errorMsgDialogShow.value = true;
            return;
        }
        ElMessage.success('提交成功');
        switchUploadDataDialog();
        emits('success');
    } finally {
        submitLoading.value = false;
    }
};
</script>

<style lang="scss" scoped>
.tips-box {
    width: 100%;
    height: 40px;
    background: rgba(255, 180, 20, 0.1);
    border-radius: 4px;
    box-sizing: border-box;
    padding: 0 20px;
    display: flex;
    align-items: center;
    .tips-icon {
        width: 18px;
        height: 18px;
    }
    .tips-info {
        font-size: 14px;
        color: #666;
        margin-left: 10px;
    }
}
.el-form {
    .el-form-item {
        margin-bottom: 20px;
    }
}
.dialog-form-input {
    width: 260px;
}
::v-deep {
    .el-upload {
        width: 360px;
        height: 180px;
        margin-top: 12px;
        .el-upload-dragger {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .el-icon-upload {
            font-size: 68px;
            color: #ccc;
        }
        .upload-text {
            font-size: 12px;
            color: #ccc;
            margin-top: 6px;
            display: flex;
            flex-direction: column;
        }
        .highlight-text {
            color: #e60044;
            margin-left: 5px;
        }
    }
    .el-upload-list {
        width: 360px;
    }
}
</style>
